<template>
	<view class="page-group">
		<image class="bg-img-view" :src="base.JavaimgUrl + '/login/img_login_bg.png'"></image>
		<view class="top-group-view">
			<uv-navbar :autoBack="true" :fixed="false" bg-color="rgba(0,0,0,0)"></uv-navbar>
			<view class="center-group-view">
				<view class="input-group-view" v-if="currentTab === 0">
					<view style="height: 26rpx"></view>
					<view class="input-item_view">
						<image :src="base.JavaimgUrl + '/login/icon_account.png'"></image>
						<input class="input-box-view" v-model="inputAccount" type="number" maxlength="11" placeholder="请输入手机号"
							confirm-type="next" placeholder-class="placeholder-view" />
					</view>
					<view class="input-item_view">
						<image :src="base.JavaimgUrl + '/login/icon_smscode.png'"></image>
						<input class="input-box-view" v-model="inputSms" type="text" maxlength="6" placeholder="请输入验证码"
							confirm-type="next" placeholder-class="placeholder-view" />
						<view @click="sendCodeClick()" :disabled="disabled" class="send-code-txt">
							{{ countdown }}
							<text v-show="timestatus">秒</text>
						</view>
					</view>
					<view class="login-btn-view">
						<view class="btn1" v-if="!isRegister" @click="phoneLoginClick()">登录</view>
						<view class="btn1" v-else @click="phoneLoginClick()">注册</view>
						<view class="btn2" @click="cancelLoginClick">取消</view>
					</view>
				</view>
				<!-- <view class="input-group-view" v-else>
					<view style="height: 26rpx"></view>
					<view class="input-item_view">
						<image :src="base.JavaimgUrl + '/login/icon_number.png'"></image>
						<input
							class="input-box-view"
							v-model="inputNumber"
							type="number"
							maxlength="11"
							placeholder="请输入手机号"
							confirm-type="next"
							placeholder-class="placeholder-view"
						/>
					</view>

					<view class="input-item_view">
						<image :src="base.JavaimgUrl + '/login/icon_password.png'"></image>
						<input
							class="input-box-view"
							v-model="inputPwd"
							type="text"
							:password="showPassword"
							placeholder="请输入密码"
							confirm-type="next"
							placeholder-class="placeholder-view"
						/>
						<view style="margin-right: 20rpx">
							<uv-icon size="18px" :name="showPassword ? 'eye-off-outline' : 'eye'" @click="showPassword = !showPassword"></uv-icon>
						</view>
					</view>
					<view class="login-btn-view">
						<view class="btn1" @click="numberLoginClick()">登录</view>
						<view class="btn2">取消</view>
					</view>
				</view> -->
				<view class="remind-txt-view">
					<text @click="changeLoginClick()" v-if="isRegister">已有账号？点我登录</text>
					<text @click="changeRegisterClick()" v-else>没有账号？点我注册</text>
				</view>
			</view>
		</view>
		<view class="bottom-group-view">
			<view style="display: flex; margin-top: 32rpx" class="agreement-view">
				<view @click="checkAgreenClick()" style="display: flex; align-items: center">
					<dx-icons v-if="isCheck" color="#F7CB47" size="30rpx" type="circle-filled" />
					<dx-icons v-else color="#ccc" size="30rpx" type="circle" />
					我已阅读并同意
				</view>
				<view class="agreement-view">
					<text @click="registerPolicyClick()" class="agreement-text">《抖鑫用户使用协议》</text>
					<text @click="privacyPolicyClick()" class="agreement-text">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import base from '@/common/baseURL.js';
import api from '@/common/api.js';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserinfoStore } from '@/stores/userInfo';
const userInfo_Store = useUserinfoStore();
// import configUrls from '@/common/config.js';
// const { iStatusBarHeight } = GetEquipmentInformat();
//登录方式
const currentTab = ref(0);
//手机号
const inputAccount = ref('');
//验证码
const inputSms = ref('');
//禁用
const disabled = ref(false);
const countdown = ref('获取验证码');
//倒计时是否结束
const timestatus = ref(false);
//密码
const inputPwd = ref('');
//是否同意
const isCheck = ref(false);
const inputNumber = ref('');
//查看密码
const showPassword = ref(true);
const isRegister = ref(false);
const clear = ref();
const sendCodeClick = async () => {
	if (inputAccount.value.length < 11) {
		uni.showToast({
			title: '请输入11位手机号码',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	if (!disabled.value) {
		disabled.value = true; //禁用点击
		uni.showLoading({
			title: '加载中...'
		});
		const res = await api.getCode_API({ mobile: inputAccount.value });
		console.log('发送验证码=======>' + JSON.stringify(res));
		uni.hideLoading();
		if (res.code === 10000) {
			countdown.value = 60;
			timestatus.value = true;
			clear.value = setInterval(countDownFn, 1000);
		} else {
			disabled.value = false;
		}
		uni.showToast({
			title: res.msg,
			icon: 'none',
			duration: 2000
		});
	}
};
// 倒计时
const countDownFn = () => {
	if (!countdown.value) {
		disabled.value = false;
		timestatus.value = false;
		countdown.value = '获取验证码';
		clearInterval(clear.value);
	} else {
		--countdown.value;
	}
};
let loginParams = {};
onLoad((options) => {
	if (options.loginParams) {
		loginParams = JSON.parse(options.loginParams);
		isRegister.value = loginParams.isRegister;
		isCheck.value = true;
	}
});
const inputReference = ref(getApp().globalData.higherlevelId);
/**
 * 验证码登录
 */
const phoneLoginClick = () => {
	if (checkParamsForPhone()) {
		let params = {};
		//新用户注册 可能新用户带参过来了之后 但是用老用户的登录
		if (loginParams.unionId) {
			//是否注册
			if (isRegister.value) {
				params = {
					phone: inputAccount.value,
					captcha: inputSms.value,
					topCode: inputReference.vlaue,
					isRegister: isRegister.value,
					unionId: loginParams.unionId,
					openId: loginParams.openId,
					platform: 1
				};
			} else {
				params = {
					phone: inputAccount.value,
					captcha: inputSms.value,
					unionId: loginParams.unionId,
					openId: loginParams.openId,
					platform: 1
				};
			}
			phoneLogin(params);
		} else {
			//老用户用验证码登录
			uni.login({
				scopes: 'auth_user',
				success: (loginInfo) => {
					if (isRegister.value) {
						params = {
							phone: inputAccount.value,
							captcha: inputSms.value,
							topCode: inputReference.value,
							isRegister: isRegister.value,
							code: loginInfo.code,
							platform: 1
						};
					} else {
						params = {
							phone: inputAccount.value,
							captcha: inputSms.value,
							code: loginInfo.code,
							platform: 1
						};
					}
					phoneLogin(params);
				}
			});
		}
	}
};
const phoneLogin = async (params) => {
	const res = await api.phoneLogin_API(params);
	if (res.code === 10000) {
		let loinMsgDict = res.data.token;
		userInfo_Store.Login(loinMsgDict);
		await userInfo_Store.GetUserInfo();
		uni.switchTab({
			url: '/pages/main/main'
		});
	}
};
const checkParamsForPhone = () => {
	if (inputAccount.value.length < 11) {
		uni.showToast({
			title: '请输入11位手机号码',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (!inputSms.value) {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (!isCheck.value) {
		uni.showToast({
			title: '请先勾选同意用户协议',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	return true;
};
//已有账号
const changeLoginClick = () => {
	isRegister.value = false;
	// currentTab.value = 1;
};
//注册
const changeRegisterClick = () => {
	isRegister.value = true;
	// currentTab.value = 0;
};
const cancelLoginClick = () => {
	uni.switchTab({
		url: '/pages/main/main',
	})

};
/**
 * 密码登录
 */
// const numberLoginClick = () => {
// 	if (checkParamsForCode()) {
// 		var params;
// 		//新用户
// 		if (loginParams.unionId) {
// 			params = {
// 				phone: inputNumber.value,
// 				captcha: inputPwd.value,
// 				unionId: loginParams.unionId,
// 				platform: 1
// 			};
// 			codeLoginClick(params);
// 		} else {
// 			//老用户
// 			uni.login({
// 				scopes: 'auth_user',
// 				success: (loginInfo) => {
// 					params = {
// 						phone: inputNumber.value,
// 						captcha: inputPwd.value,
// 						code: loginInfo.code,
// 						platform: 1
// 					};
// 					codeLoginClick(params);
// 				}
// 			});
// 		}
// 	}
// };
// const codeLoginClick = async (params) => {
// 	const res = await api.codeLogin_API(params);
// 	if (res.code === 10000) {
// 		let loinMsgDict = res.data.token;
// 		if (loinMsgDict) {
// 			userInfo_Store.Login(loinMsgDict);
// 			userInfo_Store.GetUserInfo();
// 		}
// 	}
// };
// const checkParamsForCode = () => {
// 	if (inputNumber.value.length < 11) {
// 		uni.showToast({
// 			title: '请输入11位手机号码',
// 			icon: 'none',
// 			duration: 2000
// 		});
// 		return false;
// 	}
// 	if (!inputPwd.value) {
// 		uni.showToast({
// 			title: '请输入密码',
// 			icon: 'none',
// 			duration: 2000
// 		});
// 		return false;
// 	}
// 	if (!isCheck.value) {
// 		uni.showToast({
// 			title: '请先勾选同意用户协议',
// 			icon: 'none',
// 			duration: 2000
// 		});
// 		return false;
// 	}
// 	return true;
// };

const checkAgreenClick = () => {
	if (isCheck.value) {
		isCheck.value = false;
	} else {
		isCheck.value = true;
	}
};
const registerPolicyClick = () => {
	uni.navigateTo({
		url: '/pages/index/h5Webview?titleStr=用户协议&url=' + encodeURIComponent(JSON.stringify(base.registerPolicy))
	});
};
const privacyPolicyClick = () => {
	uni.navigateTo({
		url: '/pages/index/h5Webview?titleStr=隐私政策&url=' + encodeURIComponent(JSON.stringify(base.privacyPolicy))
	});
};
const back = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.page-group {
	position: relative;
	width: 100vw;
	height: 100vh;
}

.top-group-view {
	display: flex;
	flex-direction: column;
	position: absolute;
}

.top-title-view {
	display: flex;
	align-items: center;
}

.bg-img-view {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.back-img-view {
	width: 40rpx;
	height: 40rpx;
	margin-left: 32rpx;
}

.center-group-view {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
}

.title-group-view {
	width: 476rpx;
	height: 76rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 36rpx;
	background: #ffffff;
	border-radius: 38rpx;
	margin-bottom: 90rpx;
}

.title-tab-native {
	width: 240rpx;
	line-height: 76rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	background: linear-gradient(138deg, #f7cb47 0%, #d4ce4e 100%);
	border-radius: 76rpx;
}

.title-tab-normal {
	width: 240rpx;
	line-height: 76rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #cccccc;
	text-align: center;
}

.input-group-view {
	width: 91.2vw;
	margin-left: 4.3vw;
	margin-right: 4.3vw;
	background-color: #ffffff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
}

.input-item_view {
	margin-left: 60rpx;
	margin-right: 60rpx;
	margin-top: 58rpx;
	height: 88rpx;
	background: #ffffff;
	border-radius: 38rpx;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.input-item_view image {
	width: 40rpx;
	height: 40rpx;
	margin-left: 36rpx;
	margin-right: 12rpx;
}

.input-box-view {
	flex: 1;
	height: 88rpx;
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #666666;
	margin-right: 36rpx;
}

.send-code-txt {
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #a6a6a6;
	line-height: 88rpx;
	text-align: center;
	margin-right: 26rpx;
}

.placeholder-view {
	color: #ccc;
}

.login-btn-view {
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 160rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
}

.btn1 {
	background: linear-gradient(138deg, #f7cb47 0%, #d4ce4e 100%);
	border-radius: 88rpx;
	line-height: 88rpx;
}

.btn2 {
	background-color: #cccccc;
	border-radius: 88rpx;
	line-height: 88rpx;
	margin-top: 20rpx;
}

.remind-txt-view {
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #666666;
	line-height: 44rpx;
	margin-top: 26rpx;
	margin-bottom: 22rpx;
	display: flex;
	justify-content: center;
}

.bottom-group-view {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	width: 100vw;
	margin-bottom: 80rpx;
}

.wx-login-view {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0);
}

.wx-login-image {
	width: 60rpx;
	height: 60rpx;
	margin: 20rpx;
}

button::after {
	border: 0;
}

.agreement-view {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #cccccc;
	line-height: 44rpx;
}

.agreement-image {
	width: 26rpx;
	height: 26rpx;
	margin: 9rpx;
}

.agreement-text {
	color: #5271ff;
	background: linear-gradient(135deg, #f7cb47 0%, #c2cf51 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>
